<template>
  <div class="register">
      <!-- 头部登录标题 -->
    <div class="header">
        <div>
            <a href="javascript:history.go(-1)">
                <img src="img/返回.png" alt="">
            </a>

        </div>
        <span>注册</span>
        <router-link to="/login">
            登录
            </router-link>
    </div>
    <!-- 主体部分 -->
    <div class="main">
        <form>
            <div>
                <input type="text" id="username" class="" v-model="username" @blur="input1($event)" placeholder="请输入用户名" minlength="4" maxlength="8" />
                <span id="userts">{{ts1}}</span>
            </div>
            <div>
                <input type="text" class="" name="" value="" id="phone" v-model="phone" @blur="input2($event)" placeholder="请输入手机号" />
                <span id="phonets">{{ts2}}</span>
            </div>
            <div id="m">
                <input :type="ty1" id="pwd1" class="" @input="input3($event)" v-model="mima" placeholder="请输入6位密码(数字、字母和下划线)" value="" maxlength="6">
                <span><img :src="img1" alt="" id="yan" @click="yan()"></span>
                <span id="pwd1ts">{{ts3}}</span>
            </div>
            <div id="n">
                <input :type="ty2" id="pwd2" class="" @input="input4($event)" placeholder="再次验证密码" value="" maxlength="6">
                <span><img :src="img2" alt="" id="jing" @click="jing()"></span>
                <span id="pwd2ts">{{ts4}}</span>
            </div>
            <!--  -->
            <div class="tongyi">
                <span id="gouts">{{tsCheck}}</span>
                <p><input type="checkbox" @change="check" v-model="checkbox" name="" value="m" id="gou"><label for="gou">勾选按钮即代表同意</label>
                    <a href="" class="">《大哥注册协议》</a>
                </p>
            </div>
            <div class="zhuce">
                <input type="button" id="btn" @click="btn"  value="注册">
            </div>

        </form>
    </div>
    <!-- 弹框提示 -->
    <div id="tangk" class="tangk" v-bind:style="{display:blockNone}">
        <p>注册成功！</p>
        <p>正在进入登录页面...</p>
    </div>
  </div>
</template>
<style  scoped>
.register{
    background-color: #F7F7F7;
    width: 100%;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
    color: black;
}
a:hover{
    -webkit-tap-highlight-color: transparent;
}
input{
    outline-style: none;
    border: 0;
}
/* 头部登录标题 */
.header{
    width: 100%;
    height: 1.173333rem;
    display: flex;
    justify-content:space-around;
    align-items: center;
    background-color: white;
}
.header span{
  width: 70%;
  text-align: center;
  font-size: 0.426667rem;
  font-weight: bold;
}

.header div img{
    width: 0.533333rem;
}
.header a{
    font-size: 0.373333rem;
    color: #aaa;
}
/* 主体部分 */
.main{
    width: 100%;
    background: #fff;
    margin-top: 4%;
}
.main div{
    position: relative;
    width: 100%;
    padding: 2% 4%;
    border-bottom: 1px solid #eee;
    margin-bottom: 0.266667rem;
}
.main div input{
    width: 100%;
    height: 0.853333rem;
    color: #333;
    font-size: 0.426667rem;
    margin: 1% 0;
}
.main div span{
    font-size: 0.32rem;
    color: red;
}

#userts,#phonets,#emailts,#pwd1ts,#pwd2ts{
    position: absolute;
    bottom: -0.053333rem;
    left: 4%;
}
.tongyi{
    display: flex;
    justify-content: center;
    align-content: flex-end;
    margin-top: 6%;
    position: relative;
}
/*  */
.tongyi p{
    font-size: 0.346667rem;
    color: grey;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tongyi p a{
    color: rgb(240, 65 ,85);
    font-size: 0.346667rem;
}
#btn{
    background: rgb(240, 65 ,85);
    height: 1.2rem;
    line-height: 1.2rem;
    border: none;
    color: #fff;
    border-radius: 0.106667rem;
    width: 100%;
    font-size: 0.418133rem;
}
.main .tongyi,.main .zhuce{
    border: none;
    padding: 0 4%;
}
/*  */
.tongyi p input{
    width: 0.32rem;
}
#gouts{
    position: absolute;
    top: -30%;
    left: 40%;
}
label{
    margin-bottom: 0;
}
/* 眼睛 */
#m,#n{
    position: relative;
}
#yan,#jing{
    position: absolute;
    right: 5%;
    top: 0.453333rem;
    width: 0.56rem;

}
/* 弹框提示 */
/* .tangk{
    display: none;
} */
.tangk p{
    text-align: center;
    margin-bottom: 10px;
}
.tangk{
    clear: both;
    width: 240px;
    border: 1px solid rgba(0, 0, 0, .4);
    border-radius: 3%;
    position: fixed;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 10;
    background-color: white;
    font-size: 16px;
    color: blue;
    background: purple;
}
</style>
<script>
export default {
  name: "register",
  data() {
    return {
      username:"",   //用户名
      phone:"",     //手机号
      blockNone:"none",
      ts1:"",  //用户名提示
      ts2:"",  //手机号提示
      ts3:"",  //密码提示
      ts4:"",  //再次密码提示
      mima:"", //密码
      img1:"img/眼睛.png",
      img2:"img/眼睛.png",
      ty1:"password",  //密码type类型
      ty2:"password",  //确认密码type类型
      checkbox:"",
      tsCheck:"",
      arr:[false,false,false,false,false]
    };
  },
  components: {},
  methods:{
      //用户名判断
      input1(e){
        var reg1=/^[a-zA-z0-9]{4,8}$/ig;
          if(e.target.value.trim()==''){
              this.ts1='用户名不能为空';
              this.arr[0]=false;
          }else if(!reg1.test(e.target.value)){
              this.ts1='用户名格式错误';
              this.arr[0]=false;
          }else{
              const obj={id:1,username:this.username};
              this.$axios.post('http://118.178.184.210:3000/register',obj).then((data)=>{
                if(data.status==200){
                    if(data.data.code==200){
                        //console.log(data)
                        this.ts1='';
                        this.arr[0]=true;
                    }else{
                        this.ts1=data.data.msg;
                        this.arr[0]=false;
                    }
                }						
			  }).catch(function(err){
				console.log(err);
		      })
        
          }
          /*  */
      },
      input2(e){
          var reg2=/^1[3-9]\d{9}$/ig;
          if(e.target.value.trim()==''){
              this.ts2='手机号不能为空';
              this.arr[1]=false;
          }else if(!reg2.test(e.target.value)){
              this.ts2='用户名格式错误';
              this.arr[1]=false;
          }else{
              const obj={id:2,phone:this.phone};
              this.$axios.post('http://118.178.184.210:3000/register',obj).then((data)=>{
                if(data.status==200){
                    //console.log(data)
                    if(data.data.code==200){
                        this.ts2='';
                        this.arr[1]=true;
                    }else{
                        this.ts2=data.data.msg;
                        this.arr[1]=false;
                    }
                }						
			  }).catch(function(err){
				console.log(err);
		      })
          }
      },
      input3(e){
          var reg3=/^[\w]{6}$/ig;
          if(e.target.value.trim()==''){
              this.ts3='密码不能为空';
              this.arr[2]=false;
          }else if(!reg3.test(e.target.value)){
              this.ts3='密码格式错误';
              this.arr[2]=false;
          }else{
              this.ts3='';
              this.arr[2]=true;
          }
      },
      input4(e){
          if(e.target.value.trim()==''){
              this.ts4='确认密码不能为空';
              this.arr[3]=false;
          }else if(e.target.value!=this.mima){
              this.ts4='两次密码不一致';
              this.arr[3]=false;
          }else{
              this.ts4='';
              this.arr[3]=true;
          }
      },
      yan(){
          if(this.ty1=="password"){
            this.ty1="text"
            this.img1="img/眼睛2.png"
          }else{
            this.ty1="password";
            this.img1="img/眼睛.png";
          }
          
      },
      jing(){
          if(this.ty2=="password"){
            this.ty2="text";
            this.img2="img/眼睛2.png";
          }else{
            this.ty2="password"
            this.img2="img/眼睛.png"
          }         
      },
      //协议勾选
      check(){
          if(this.checkbox){
              this.tsCheck=""
              this.arr[4]=true;
          }else{
              this.tsCheck="您还未同意协议";
              this.arr[4]=false;
          }
      },
      //注册按钮
      btn(){
          if(!this.checkbox){
              this.tsCheck="您还未同意协议"
          }else{
              this.tsCheck=""
          }
        this.arr.some((item,index) =>{
            if(item==false){
                console.log("不能跳转");
                console.log(this.arr)
                return true;
            }else{
                if(index==this.arr.length-1){
                    this.arr=[false,false,false,false,false]
                    //所有开关都开启
                    //console.log("准备跳转");

                    /* 将数据传后端，加入数据库中 */
                    var shi=new Date().getTime();
                    const obj={id:3,username:this.username,phone:this.phone,password:this.mima,time:shi};
                        this.$axios.post('http://118.178.184.210:3000/register',obj).then((data)=>{
                            if(data.status==200){
                            }						
			            }).catch(function(err){
				            console.log(err);
		                })
                    /*  */
                    this.blockNone="block"
                    setTimeout(()=>{
                        this.blockNone="none"
                        this.$router.push({path:'/login'})
                    },2000)
                    
                }
            }
        })

      }
  }
  
};
</script>